<template>
  <div id="z-tree" class="flex-col">
    <div class="wrap flex-1">
        <h2>大数据量树</h2>
      <div class="c" style="height: 600px; overflow: auto;">
        <vue-magic-tree ref="bigtreeRef"
          :nodes="nodes"
          :setting="setting"
          @onClick="onClick"
          @onCheck="onCheck"
          @onCreated="handleCreated"
        />
      </div>
    </div>
    <el-button @click="getNodeByParam">勾选某个节点</el-button>
    <el-button @click="getCheckedNodes">获取选中的节点值</el-button>
  </div>
</template>

<script>
import axios from 'axios';
const bigData = require("./big-tree-data.json");
import VueMagicTree from 'vue-magic-tree'

export default {
  name: "SampleDataTree",
  components: {
    VueMagicTree, // 引入组件包
  },
  data() {
    let _this = this;
    return {
      nodes: [],
      showIndex: 0,
      ztreeObj: null,
      setting: {
        check: {
          enable: true,
        },
        data: {
        //   simpleData: {
        //     enable: true,
        //     idKey: 'nodeId',
        //     pIdKey: "parentId"
        //   },
          // 设置图标库(采用iconfont class形式)
          iconMap: {
            0: 'iconfilter-fill',
            1: 'iconhome',
            2: 'iconstar'
          },
          // 设置对应每个节点的节点类型，与数据中customType对应(25行)
          key: {
            nodeType: 'customType',
            name: 'nodeName',
            title: 'nodeName',
            children: 'childList',
            isParent: 'hasChild'
          }
        },
        callback: {
          onCheck: function (event, treeId, treeNode) {
            console.log(treeNode);
          }
        }
      }
    };
  },
  mounted() {
    setTimeout(() => {this.firstData()}, 20);
  },
  methods: {
    firstData() {
      let nodeId = '358198412409044992';
      let nodeType = '5';
      let url= `http://172.31.119.38:35002/roc/customerweb/web/basedata/getHousesTree?projectId=${nodeId}`
      axios.get(url, {
        headers: {
          'X-Access-Source': 'roc',
          'X-Access-Token': '1817ac8bb1d434568200bd9a92b2a34d'
        }
      }).then(res => {
        if (res.data.code === '0') {
          let data = res.data.data;
        //   data.childList.forEach(item => {
        //     if (!item.hasChild) { // 如果这个节点没有子级
        //         delete item['childList'];
        //     } else if (item.nodeType === '9') {
        //         item.hasChild = false;
        //         delete item['childList'];
        //     }
        //   })
          function fn(pData) {
              if (pData.childList && pData.childList.length) {
                  pData.hasChild = true;
                  pData.childList.forEach(item => {
                    if (item.nodeType === '9') {
                        item.hasChild = false;
                        delete item['childList'];
                    } else {
                        fn(item);
                    }
                  })
              } else {
                  pData.hasChild = false;
                  delete pData['childList'];
              }              
          }
          fn(data);
          console.log(data,'xxxxxxxxxxxxxxxxxxxxxxxxxxxxx');
          this.nodes = [data];
        }
      })
    },
    clickRemove(treeNode) {
      console.log('remove', treeNode)
      this.ztreeObj && this.ztreeObj.removeNode(treeNode)
    },
    onClick: function(evt, treeId, treeNode) {
      // 点击事件
      console.log(evt.type, treeNode);
    },
    onCheck: function(evt, treeId, treeNode) {
      // 选中事件
      console.log(evt.type, treeNode);
    },
    handleCreated: function(ztreeObj) {
      this.ztreeObj = ztreeObj;
      // onCreated 中操作ztreeObj对象展开第一个节点
      ztreeObj.expandNode(ztreeObj.getNodes()[0], true);
    },
    getNodeByParam() { // 获取某个节点
    //   let node = this.ztreeObj.getNodeByParam("nodeId", '358708932484530176', null);
    //   if (node) {
    //     this.ztreeObj.checkNode(node, true, true);
    //   }
        let nodeIds = ["359698021673336833","440209253949505536","453235704344870912"];
        nodeIds.forEach(nodeId => {
            let node = this.ztreeObj.getNodeByParam('nodeId', nodeId);
            console.log(node);
            if(node) {
                this.ztreeObj.checkNode(node, true, true);
            }
        });
    },
    getCheckedNodes() { // 获取选中的节点
      let checkedNodes = this.ztreeObj.getCheckedNodes(true);
      console.log(checkedNodes);
      let houseNodes = checkedNodes.filter(item => item.nodeType === '9');
      console.log(houseNodes);
      let houseCodes = houseNodes.map(item => item.nodeName).join(';');
      console.log(houseCodes);
    }
  }
};
</script>

<style>
#z-tree {
  height: 100%;
}
.toolbar {
  margin: 20px auto;
}
.toolbar .btn {
  padding: 0.5em 1em;
  outline: none;
  border-radius: 4px;
}
</style>